<template>
  <view class="box">
    <button @click="handleClick" v-if="!address">获取收货地址</button>
    <view v-else class="content">
      <view class="site">{{ detailAddress }}</view>
      <view class="user">
        <view class="name">{{ address.userName }}</view>
        <view>{{ address.telNumber }}</view>
      </view>
    </view>

    <!-- 选中要支付的商品 -->
    <view class="commodity">
      <view class="title">已选商品</view>
      <view
        class="coentent_item"
        v-for="item in pitchList"
        :key="item.goods_id"
      >
        <view class="left">
          <u-image
            mode="widthFix"
            :src="item.goods_small_logo"
            width="80%"
          ></u-image>
        </view>
        <view class="right">
          <view class="right_title u-line-2">{{ item.goods_name }}</view>
          <view class="right_floot">
            <view class="right_price">¥{{ item.goods_price }}</view>
            <view>x{{ item.count }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部支付栏 -->
    <view class="floot">
      <view class="floot_sum">
        <view class="floot_text">合计:</view>
        <view class="floot_price">¥{{ total }}</view>
      </view>
      <view class="goPay" @click="goPay">去支付({{ numCases }})</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      //用户收货地址  为什么用null 因为空数组 或者空对象的值是true
      address: null,
    };
  },

  computed: {
    detailAddress() {
      // 解决address:初始值为 null
      if (!this.address) return null;
      //用户的详细地址  在这里拼接比较安全
      const { provinceName, cityName, countyName, detailInfo } = this.address;
      return provinceName + cityName + countyName + detailInfo;
    },

    //用户选中的商品
    pitchList() {
      return this.$store.getters.pitchList;
    },

    //总价格
    total() {
      return this.$store.getters.total;
    },

    //要支付商品的件数
    numCases() {
      return this.$store.getters.doneTodos;
    },
  },

  methods: {
    //点击获取用户收货地址
    async handleClick() {
      const [err, res] = await uni.chooseAddress();
      this.address = res;
    },

    //点击支付
    async goPay() {
      //1. 先判断有没有地址
      if (!this.address) {
        uni.showToast({
          title: "您还未填写收货地址！",
          icon: "none",
        });
        return;
      }

      //2.调用微信wx.getUserProfile接口 获取用户信息
      const [err1, { encryptedData, rawData, iv, signature }] =
        await uni.getUserProfile({
          desc: "用于完善会员资料", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
        });

      // 2.1  获取code 执行小程序登录后获取 用wx.login
      const [err2, { code }] = await uni.login();

      // 2.2 用以上数据向后台请求token         （本后台接口有点小问题 点第一次获取不到 第二次才可以）
      const res = await this.$u.post("/users/wxlogin", {
        encryptedData,
        rawData,
        iv,
        signature,
        code,
      });
      const { token } = res.message;

      // 3. 创建订单
      const orderParams = {
        order_price: this.total, //订单总价格
        // consignee_addr: JSON.stringify(this.address), //收货地址
        consignee_addr: this.detailAddress, //收货地址
        goods: this.pitchList.map((v) => ({
          goods_id: v.goods_id,
          goods_number: v.count,
          goods_price: v.goods_price,
        })), //订单数组
      };

      // 3.2 发送posy请求，来完成订单的创建
      const res2 = await this.$u.post("/my/orders/create", orderParams, {
        Authorization: token,
      });
      console.log(res2);
      // 4  支付 获取支付参数  pay
      const res3 = await this.$u.post(
        "/my/orders/req_unifiedorder",
        {
          order_number: res2.message.order_number, //订单号
        },
        {
          Authorization: token,
        }
      );
      const { pay } = res3.message;

      // 4.1 把参数发送给微信  调用微信小程序的api   wx.requestPayment(Object object)
      uni.requestPayment(pay);
    },
  },
};
</script>

<style lang="scss">
//page给整个页面加背景色
page {
  background-color: #eee;
}
.box {
  padding: 20rpx;

  .content {
    background-color: #fff;
    height: 187rpx;
    padding: 0 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .site {
      font-size: 35rpx;
      font-weight: 700;
    }
    .user {
      display: flex;
      margin-top: 30rpx;
      .name {
        margin-right: 50rpx;
      }
    }
  }
}
.commodity {
  margin-top: 30rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  padding: 20rpx;
  .title {
    font-size: 28rpx;
    font-weight: 700;
    margin-bottom: 30rpx;
  }
  .coentent_item {
    display: flex;
    height: 209rpx;
    .left {
      flex: 1;
      // width: 200rpx;
    }
    .right {
      flex: 2;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .right_floot {
        display: flex;
        justify-content: space-between;
      }
      .right_price {
        color: $themeColor;
      }
    }
  }
}
.floot {
  width: 100%;
  height: 83rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 0 20rpx;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  .floot_sum {
    display: flex;

    .floot_price {
      color: $themeColor;
    }
    .floot_text {
      padding-right: 20rpx;
    }
  }
  .goPay {
    width: 150rpx;
    height: 52rpx;
    background-color: $themeColor;
    color: #fff;
    border-radius: 26rpx;
    line-height: 52rpx;
    text-align: center;
  }
}
</style>